<template>
  <div class="home-top-index">
    <el-tabs v-model="tabs">
      <el-tab-pane label="时光小记" name="tabs">
        <div style="width: 45%">
          <el-input v-model="queryParams.title" placeholder="请输入标题关键字"
                    suffix-icon="el-icon-el-input__icon el-icon-search"></el-input>
        </div>
        <el-skeleton class="mt-20" v-if="loading" :rows="4" animated/>
        <div v-else class="mt-20 mb-20">
          <div v-if="moodNotesList.length>0" v-for="(item,index) in moodNotesList" :key="index"
               :ref="`userAdminTimeMotesAdminItem${index}`">
            <div class="time-motes-admin-list-item">
              <div class="flex-space-between">
                <div>
                  <span class="color-grey-2 mr-4">{{ item.recordTime }}</span>
                  <svg t="1742789451197" class="icon svg-translateY-8" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg"
                       p-id="12540" width="26" height="26">
                    <path
                      d="M790.1 423.9c0 76.5-62 138.5-138.5 138.5s-138.5-62-138.5-138.5 62-138.5 138.5-138.5c76.4 0 138.5 62 138.5 138.5z"
                      fill="#FBBA22" p-id="12541"></path>
                    <path
                      d="M842.5 587.4c0-81.9-65.3-148.2-145.9-148.2-23.3 0-45.3 5.7-64.8 15.6-31.2-39.9-79.3-65.5-133.3-65.5-75.4 0-139.3 49.8-161.7 118.8-15.6-7.8-33.1-12.2-51.7-12.2-65.1 0-118 53.7-118 119.9s52.8 119.9 118 119.9h418.5v-0.4c77.3-3.8 138.9-68.5 138.9-147.9z"
                      fill="#FFFFFF" p-id="12542"></path>
                    <path
                      d="M797.6 294.2c4.4 0 8.9-1.7 12.2-5.1l34.7-34.7c6.8-6.8 6.8-17.7 0-24.5-6.8-6.8-17.7-6.8-24.5 0l-34.7 34.7c-6.8 6.8-6.8 17.7 0 24.5 3.4 3.4 7.9 5.1 12.3 5.1zM492.4 289.2c3.4 3.4 7.8 5.1 12.2 5.1 4.4 0 8.9-1.7 12.2-5.1 6.8-6.8 6.8-17.7 0-24.5L482 229.9c-6.8-6.8-17.7-6.8-24.5 0-6.8 6.8-6.8 17.7 0 24.5l34.9 34.8zM651.5 233.4c9.6 0 17.3-7.8 17.3-17.3v-52c0-9.6-7.8-17.3-17.3-17.3-9.6 0-17.3 7.8-17.3 17.3v52c0 9.5 7.8 17.3 17.3 17.3zM911.8 406.6h-52.4c-9.6 0-17.3 7.8-17.3 17.3 0 9.6 7.7 17.3 17.3 17.3h52.4c9.6 0 17.3-7.8 17.3-17.3s-7.7-17.3-17.3-17.3zM802.5 461.6c3.1-12.1 4.9-24.7 4.9-37.7 0-85.9-69.9-155.8-155.9-155.8-67.7 0-125.3 43.5-146.7 104-2.1-0.1-4.2-0.2-6.3-0.2-75 0-141.8 44.9-171.6 113.4-13.5-4.5-27.5-6.8-41.8-6.8-74.6 0-135.3 61.5-135.3 137.2 0 75.6 60.7 137.2 135.3 137.2h418.5c1.5 0 3-0.2 4.4-0.6 85.4-6 151.7-77.8 151.7-164.9 0.1-50.3-22.2-95.4-57.2-125.8z m-151-158.9c66.8 0 121.2 54.4 121.2 121.2 0 5.6-0.4 11.2-1.2 16.6-22.5-11.8-47.9-18.6-74.9-18.6-20.7 0-40.8 3.9-60 11.7-26-28.8-59.6-48.4-96.5-56.9 18.5-43.4 61.3-74 111.4-74zM702.8 718c-0.9 0-1.8 0.2-2.7 0.3h-415c-55.5 0-100.6-46-100.6-102.6 0-56.5 45.1-102.5 100.6-102.5 15.2 0 30 3.5 44 10.4 4.5 2.2 9.8 2.4 14.4 0.4 4.6-1.9 8.2-5.8 9.8-10.6 20.8-63.9 79.2-106.9 145.3-106.9 46.8 0 90.4 21.5 119.7 58.9 5.1 6.5 14.1 8.5 21.4 4.8 18-9.1 37.2-13.7 57-13.7 70.9 0 128.6 58.7 128.6 130.9-0.1 69.9-53.9 127.2-122.5 130.6z"
                      fill="#211F1E" p-id="12543"></path>
                  </svg>
                  <span style="border-bottom: 1px solid #dfe4ea;padding-bottom: 4px; display: inline-block"
                        class="cursor-pointer ml-2" @click="getInfo(item.id)">{{ item.title }}</span>
                </div>
                <div @click="deleteById(item.id)">
                  <svg t="1742976118757" class="icon-theme-2 icon-hover cursor-pointer icon-size-16 svg-translateY-8"
                       viewBox="0 0 1024 1024"
                       version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="50854">
                    <path
                      d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zM864 256H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
                      p-id="50855"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <div v-if="moodNotesList.length==0">
            <div style="text-align: center">
              <div>
                <svg t="1667825747332" class="icon" viewBox="0 0 1239 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="1560" width="50" height="50">
                  <path
                    d="M1215.146667 961.194667c0 35.498667-240.298667 62.805333-540.672 62.805333-297.642667 0-540.672-27.306667-540.672-62.805333 0-35.498667 240.298667-62.805333 540.672-62.805334 297.642667 0 540.672 27.306667 540.672 62.805334"
                    fill="#DFDFDF" p-id="1561"></path>
                  <path
                    d="M95.573333 245.76l-5.461333-5.461333c2.730667-2.730667 8.192-5.461333 13.653333-10.922667l5.461334 5.461333c-5.461333 2.730667-8.192 8.192-13.653334 10.922667z m19.114667-13.653333l-2.730667-8.192c8.192-5.461333 19.114667-10.922667 27.306667-16.384l2.730667 8.192c-8.192 5.461333-19.114667 10.922667-27.306667 16.384z m906.581333 494.250666h-24.576v-8.192h32.768v8.192c-2.730667-2.730667-5.461333 0-8.192 0z m16.384-2.730666v-8.192c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 2.730667z m-49.152 0c-10.922667 0-21.845333-2.730667-32.768-5.461334l2.730667-8.192c10.922667 2.730667 19.114667 2.730667 32.768 5.461334l-2.730667 8.192z m-40.96-8.192c-10.922667-2.730667-21.845333-5.461333-30.037333-10.922667l2.730667-8.192c8.192 5.461333 19.114667 8.192 30.037333 10.922667l-2.730667 8.192z m-38.229333-13.653334c-10.922667-5.461333-19.114667-13.653333-27.306667-21.845333l5.461334-5.461333c5.461333 8.192 13.653333 13.653333 24.576 19.114666l-2.730667 8.192z m-30.037333-30.037333c-5.461333-8.192-10.922667-19.114667-13.653334-30.037333l8.192-2.730667c2.730667 10.922667 5.461333 19.114667 13.653334 27.306667l-8.192 5.461333z m-16.384-38.229333c0-5.461333-2.730667-13.653333-2.730667-21.845334v-13.653333h8.192v10.922667c0 5.461333 0 13.653333 2.730667 19.114666l-8.192 5.461334z m8.192-40.96h-8.192c0-10.922667 2.730667-21.845333 5.461333-32.768l8.192 2.730666c-2.730667 10.922667-2.730667 19.114667-5.461333 30.037334z m8.192-38.229334l-8.192-2.730666c2.730667-10.922667 8.192-19.114667 10.922666-30.037334l8.192 2.730667c-2.730667 10.922667-8.192 19.114667-10.922666 30.037333z m16.384-38.229333l-8.192-2.730667c5.461333-8.192 8.192-19.114667 13.653333-30.037333l8.192 2.730667c-5.461333 10.922667-10.922667 21.845333-13.653333 30.037333z m16.384-35.498667l-8.192-2.730666c5.461333-8.192 10.922667-19.114667 16.384-27.306667l8.192 5.461333c-5.461333 5.461333-10.922667 13.653333-16.384 24.576z m19.114666-35.498666l-8.192-5.461334c5.461333-8.192 10.922667-19.114667 16.384-27.306666l5.461334 5.461333c-2.730667 8.192-8.192 19.114667-13.653334 27.306667z m21.845334-32.768l-5.461334-5.461334c5.461333-8.192 10.922667-16.384 19.114667-27.306666l5.461333 5.461333c-5.461333 8.192-13.653333 16.384-19.114666 27.306667z m24.576-35.498667l-5.461334-5.461333c5.461333-8.192 13.653333-16.384 19.114667-27.306667l5.461333 5.461333c-8.192 10.922667-13.653333 19.114667-19.114666 27.306667z m21.845333-32.768l-5.461333-5.461333c5.461333-8.192 13.653333-16.384 19.114666-24.576l5.461334 5.461333c-5.461333 8.192-10.922667 16.384-19.114667 24.576z m27.306667-30.037333l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 19.114667-24.576l5.461333 5.461334c-8.192 8.192-13.653333 16.384-19.114666 24.576z m24.576-32.768l-5.461334-5.461334c5.461333-8.192 13.653333-16.384 21.845334-24.576l5.461333 5.461334c-8.192 8.192-16.384 16.384-21.845333 24.576z m24.576-30.037334l-5.461334-5.461333 5.461334-5.461333c5.461333-5.461333 10.922667-13.653333 16.384-19.114667l5.461333 5.461333c-5.461333 5.461333-10.922667 10.922667-16.384 19.114667l-5.461333 5.461333z m27.306666-32.768l-5.461333-5.461333c8.192-8.192 13.653333-19.114667 19.114667-27.306667l5.461333 5.461334c-5.461333 10.922667-13.653333 19.114667-19.114667 27.306666zM150.186667 210.261333l-2.730667-8.192c8.192-2.730667 16.384-8.192 27.306667-13.653333l2.730666 8.192c-8.192 2.730667-19.114667 8.192-27.306666 13.653333zM185.685333 191.146667l-2.730666-5.461334c8.192-5.461333 19.114667-10.922667 30.037333-13.653333l2.730667 8.192c-10.922667 2.730667-19.114667 8.192-30.037334 10.922667z m939.349334-5.461334l-5.461334-5.461333c5.461333-10.922667 10.922667-19.114667 16.384-27.306667l8.192 2.730667c-5.461333 10.922667-10.922667 19.114667-19.114666 30.037333z m-901.12-10.922666L218.453333 166.570667c10.922667-2.730667 21.845333-8.192 32.768-10.922667l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-30.037333 10.922667z m35.498666-16.384l-2.730666-5.461334c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 0-19.114667 5.461333-30.037334 8.192zM1146.88 147.456l-8.192-2.730667c2.730667-8.192 8.192-19.114667 8.192-30.037333l8.192 2.730667c-2.730667 10.922667-5.461333 21.845333-8.192 30.037333z m-849.237333-2.730667l-2.730667-8.192c10.922667-2.730667 19.114667-8.192 30.037333-10.922666l2.730667 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922666z m38.229333-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-8.192 30.037334-10.922667l2.730666 8.192c-8.192 2.730667-19.114667 8.192-30.037333 10.922667z m38.229333-13.653333l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-10.922667l5.461333 10.922667-32.768 8.192zM1157.802667 109.226667h-8.192v-8.192c0-8.192 0-13.653333-2.730667-21.845334l8.192-2.730666c2.730667 8.192 2.730667 16.384 2.730667 24.576V109.226667z m-742.741334-2.730667l-2.730666-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 0-21.845333 2.730667-30.037334 8.192z m38.229334-13.653333l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 30.037333-8.192l2.730667 8.192c-10.922667 2.730667-19.114667 5.461333-30.037333 8.192zM491.52 81.92l-2.730667-8.192 32.768-8.192 2.730667 8.192L491.52 81.92z m38.229333-8.192l-2.730666-8.192 32.768-8.192 2.730666 8.192-32.768 8.192z m614.4-2.730667c-5.461333-8.192-10.922667-16.384-19.114666-24.576l5.461333-5.461333c8.192 8.192 16.384 16.384 21.845333 27.306667l-8.192 2.730666z m-573.44-8.192l-2.730666-8.192 32.768-8.192V54.613333c-8.192 2.730667-19.114667 5.461333-30.037334 8.192z m38.229334-8.192l-2.730667-8.192 32.768-8.192 2.730667 8.192-32.768 8.192z m40.96-10.922666l-2.730667-8.192c10.922667-2.730667 21.845333-5.461333 32.768-5.461334l2.730667 8.192c-10.922667 2.730667-21.845333 5.461333-32.768 5.461334zM1119.573333 40.96c-8.192-5.461333-19.114667-10.922667-27.306666-13.653333V19.114667c10.922667 5.461333 21.845333 8.192 30.037333 16.384l-2.730667 5.461333z m-428.714666-5.461333l-2.730667-8.192c10.922667 0 21.845333-2.730667 32.768-5.461334l2.730667 8.192c-13.653333 2.730667-24.576 5.461333-32.768 5.461334z m38.229333-5.461334V21.845333c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 2.730667-21.845333 2.730667-32.768 5.461333z m354.986667-5.461333c-10.922667-2.730667-19.114667-5.461333-30.037334-8.192l2.730667-8.192 32.768 8.192-5.461333 8.192zM770.048 24.576V16.384c10.922667-2.730667 21.845333-2.730667 32.768-5.461333v8.192c-10.922667 0-21.845333 2.730667-32.768 5.461333z m40.96-5.461333V10.922667c10.922667 0 21.845333-2.730667 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m232.106667-5.461334c-10.922667-2.730667-21.845333-2.730667-32.768-5.461333V0c10.922667 0 21.845333 2.730667 32.768 5.461333v8.192z m-193.877334 0V5.461333c10.922667 0 21.845333-2.730667 32.768-2.730666v8.192c-10.922667 0-21.845333 2.730667-32.768 2.730666z m40.96-2.730666V2.730667c10.922667 0 21.845333 0 32.768-2.730667v8.192c-10.922667 0-21.845333 0-32.768 2.730667z m114.688 0c-10.922667 0-21.845333-2.730667-32.768-2.730667V0c10.922667 0 21.845333 0 32.768 2.730667v8.192zM931.157333 8.192V0h32.768v8.192h-32.768z m150.186667 712.704v-8.192c5.461333 0 10.922667-2.730667 16.384-2.730667l2.730667 8.192c-5.461333 0-10.922667 2.730667-19.114667 2.730667z m0 0"
                    fill="#D9D9D9" p-id="1562"></path>
                  <path
                    d="M966.656 106.496H316.757333s-49.152-5.461333-51.882666 51.882667c-2.730667 57.344 0 671.744 0 750.933333 0 65.536 90.112 79.189333 122.88 40.96 43.690667-46.421333 16.384-103.765333 5.461333-106.496-8.192-2.730667 608.938667 0 608.938667 0V180.224c-2.730667 0 5.461333-73.728-35.498667-73.728"
                    fill="#FFFFFF" p-id="1563"></path>
                  <path
                    d="M333.141333 983.04c-24.576 0-46.421333-8.192-62.805333-24.576-13.653333-13.653333-19.114667-30.037333-19.114667-49.152v-122.88c0-204.8-2.730667-584.362667 0-630.784 2.730667-46.421333 32.768-62.805333 60.074667-62.805333h652.629333c10.922667 0 21.845333 5.461333 30.037334 13.653333 21.845333 24.576 16.384 70.997333 16.384 76.458667v674.474666H409.6c2.730667 5.461333 2.730667 8.192 5.461333 13.653334 5.461333 16.384 10.922667 54.613333-21.845333 90.112-13.653333 13.653333-35.498667 21.845333-60.074667 21.845333z m-19.114666-865.621333c-13.653333 0-38.229333 5.461333-38.229334 43.690666-2.730667 46.421333 0 425.984 0 628.053334v122.88c0 13.653333 5.461333 24.576 13.653334 35.498666 10.922667 10.922667 30.037333 19.114667 46.421333 19.114667 19.114667 0 35.498667-5.461333 43.690667-16.384 19.114667-21.845333 21.845333-43.690667 21.845333-57.344 0-16.384-8.192-30.037333-10.922667-32.768l-8.192-2.730667v-8.192c0-2.730667 0-5.461333 13.653334-8.192 16.384-2.730667 57.344-2.730667 150.186666-2.730666h445.098667v-655.36c2.730667-13.653333 2.730667-46.421333-10.922667-60.074667-2.730667-2.730667-8.192-5.461333-13.653333-5.461333H314.026667z m0 0"
                    fill="#A9B1B6" p-id="1564"></path>
                  <path
                    d="M346.794667 229.376h570.709333v120.149333H346.794667V229.376z m0 174.762667h141.994666V436.906667h-141.994666v-32.768z m0 90.112h286.72v32.768H346.794667v-32.768z m0 90.112H518.826667v32.768h-172.032v-32.768z m0 98.304h346.794666v32.768H346.794667V682.666667z m35.498666 144.725333s60.074667 111.957333-51.882666 147.456c0 0-5.461333 0 0 0 240.298667 2.730667 480.597333 2.730667 720.896-2.730667 10.922667-2.730667 21.845333-8.192 30.037333-13.653333 5.461333-2.730667 19.114667-16.384 27.306667-35.498667 8.192-21.845333 10.922667-54.613333-10.922667-79.189333-5.461333-8.192-13.653333-13.653333-24.576-16.384H382.293333"
                    fill="#EDEEEE" p-id="1565"></path>
                  <path
                    d="M617.130667 983.04c-95.573333 0-188.416 2.730667-283.989334 0l-16.384-2.730667 2.730667-13.653333v-2.730667h8.192c27.306667-8.192 46.421333-24.576 54.613333-43.690666 16.384-40.96-13.653333-84.650667-13.653333-84.650667l-5.461333-10.922667 712.704-5.461333h2.730666c10.922667 5.461333 19.114667 10.922667 27.306667 19.114667 21.845333 24.576 21.845333 62.805333 10.922667 87.381333-5.461333 16.384-16.384 27.306667-30.037334 38.229333-10.922667 8.192-21.845333 13.653333-32.768 16.384h-2.730666c-144.725333 2.730667-289.450667 2.730667-434.176 2.730667z m-251.221334-16.384c226.645333 2.730667 456.021333 0 682.666667-2.730667 8.192-2.730667 19.114667-8.192 27.306667-13.653333 10.922667-8.192 19.114667-19.114667 24.576-32.768 8.192-21.845333 8.192-51.882667-8.192-70.997333-5.461333-5.461333-10.922667-10.922667-19.114667-13.653334h-682.666667c8.192 19.114667 21.845333 57.344 8.192 92.842667-5.461333 16.384-16.384 30.037333-32.768 40.96z m0 0"
                    fill="#A9B1B6" p-id="1566"></path>
                  <path
                    d="M1127.765333 688.128c-8.192-8.192-24.576-16.384-43.690666-16.384 0 0 21.845333 0 40.96-13.653333 10.922667-8.192 19.114667-24.576 19.114666-43.690667 0 0 0 27.306667 19.114667 46.421333 8.192 8.192 21.845333 13.653333 40.96 13.653334 0 0-21.845333 0-38.229333 13.653333-10.922667 8.192-19.114667 24.576-19.114667 43.690667-2.730667 0 0-24.576-19.114667-43.690667M54.613333 286.72c-10.922667-10.922667-30.037333-19.114667-54.613333-19.114667 0 0 30.037333 0 51.882667-19.114666 13.653333-10.922667 21.845333-30.037333 21.845333-57.344 0 0 0 35.498667 24.576 57.344 10.922667 10.922667 30.037333 19.114667 51.882667 19.114666 0 0-27.306667 0-49.152 19.114667-13.653333 10.922667-24.576 30.037333-24.576 57.344-2.730667-2.730667 0-35.498667-21.845334-57.344M1105.92 434.176c-5.461333-5.461333-10.922667-8.192-21.845333-8.192 0 0 10.922667 0 19.114666-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-24.576 0 0 0 16.384 10.922667 24.576 5.461333 5.461333 10.922667 8.192 19.114666 8.192 0 0-10.922667 0-19.114666 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 24.576 0 0 2.730667-13.653333-8.192-24.576"
                    fill="#E79F9F" p-id="1567"></path>
                  <path
                    d="M1193.301333 595.285333c-5.461333-5.461333-13.653333-8.192-24.576-8.192 0 0 13.653333 0 24.576-8.192 5.461333-5.461333 10.922667-13.653333 10.922667-27.306666 0 0 0 16.384 10.922667 27.306666 5.461333 5.461333 13.653333 8.192 24.576 8.192 0 0-13.653333 0-24.576 8.192-5.461333 5.461333-10.922667 13.653333-10.922667 27.306667 0-2.730667 0-19.114667-10.922667-27.306667M917.504 778.24c-2.730667-2.730667-8.192-5.461333-13.653333-5.461333 0 0 8.192 0 13.653333-5.461334 2.730667-2.730667 5.461333-8.192 5.461333-16.384 0 0 0 10.922667 5.461334 16.384 2.730667 2.730667 8.192 5.461333 13.653333 5.461334 0 0-8.192 0-13.653333 5.461333-2.730667 2.730667-5.461333 8.192-5.461334 16.384 0-2.730667 2.730667-10.922667-5.461333-16.384"
                    fill="#DC8484" p-id="1568"></path>
                  <path
                    d="M1067.690667 518.826667c0 65.536-38.229333 122.88-92.842667 147.456-21.845333 10.922667-155.648 60.074667-180.224 60.074666-27.306667 0 57.344-51.882667 35.498667-62.805333-54.613333-27.306667-90.112-84.650667-90.112-144.725333 0-90.112 73.728-163.84 163.84-163.84s163.84 73.728 163.84 163.84"
                    fill="#F8E7E7" p-id="1569"></path>
                  <path
                    d="M794.624 740.010667c-10.922667 0-16.384-5.461333-16.384-8.192-5.461333-10.922667 5.461333-19.114667 21.845333-35.498667 5.461333-5.461333 16.384-16.384 19.114667-21.845333-57.344-30.037333-90.112-90.112-90.112-152.917334 0-98.304 79.189333-174.762667 177.493333-174.762666s174.762667 79.189333 174.762667 174.762666c0 68.266667-38.229333 131.072-101.034667 158.378667-19.114667 8.192-158.378667 60.074667-185.685333 60.074667z m109.226667-371.370667c-84.650667 0-152.917333 68.266667-152.917334 152.917333 0 57.344 32.768 109.226667 81.92 136.533334 5.461333 2.730667 8.192 8.192 10.922667 13.653333 2.730667 13.653333-10.922667 27.306667-27.306667 43.690667 43.690667-10.922667 131.072-43.690667 152.917334-54.613334 51.882667-24.576 87.381333-79.189333 87.381333-136.533333-2.730667-87.381333-68.266667-155.648-152.917333-155.648z m0 0"
                    fill="#E79F9F" p-id="1570"></path>
                  <path
                    d="M846.506667 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
                    fill="#FCEAEA" p-id="1571"></path>
                  <path
                    d="M830.122667 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461333-27.306666 8.192-8.192 19.114667-10.922667 27.306667-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576s-10.922667 24.576-24.576 24.576z m0-35.498666c-5.461333 0-8.192 5.461333-8.192 10.922666s2.730667 8.192 8.192 10.922667c5.461333 0 8.192-5.461333 8.192-10.922667 0-8.192-2.730667-10.922667-8.192-10.922666z m0 0"
                    fill="#E79F9F" p-id="1572"></path>
                  <path
                    d="M917.504 518.826667c0 10.922667-8.192 16.384-16.384 16.384-10.922667 0-16.384-8.192-16.384-16.384 0-10.922667 8.192-16.384 16.384-16.384s16.384 8.192 16.384 16.384"
                    fill="#FCEAEA" p-id="1573"></path>
                  <path
                    d="M898.389333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-8.192 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
                    fill="#E79F9F" p-id="1574"></path>
                  <path
                    d="M991.232 518.826667c0 5.461333-2.730667 10.922667-8.192 16.384-5.461333 2.730667-10.922667 2.730667-16.384 0-8.192-2.730667-10.922667-8.192-10.922667-16.384 0-10.922667 8.192-16.384 16.384-16.384s19.114667 8.192 19.114667 16.384"
                    fill="#FCEAEA" p-id="1575"></path>
                  <path
                    d="M972.117333 546.133333c-10.922667 0-19.114667-5.461333-24.576-16.384-2.730667-10.922667-2.730667-21.845333 5.461334-27.306666 8.192-8.192 19.114667-10.922667 27.306666-5.461334 10.922667 2.730667 16.384 13.653333 16.384 24.576 2.730667 10.922667-10.922667 24.576-24.576 24.576z m0-35.498666c-2.730667 0-5.461333 2.730667-8.192 5.461333-2.730667 2.730667-2.730667 5.461333 0 10.922667 2.730667 2.730667 5.461333 5.461333 8.192 5.461333 5.461333 0 10.922667-5.461333 10.922667-10.922667 0-8.192-5.461333-10.922667-10.922667-10.922666z m0 0"
                    fill="#E79F9F" p-id="1576"></path>
                </svg>
              </div>
              <span class="color-grey font-s-14">
          暂无数据
          </span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-drawer
      size="45%"
      direction="rtl"
      :modal="false"
      :visible.sync="infoDrawer"
      style="padding: 20px"
      :with-header="false">
      <div style="margin: 40px">
        <div class="mood-notes-title">
          <p>{{ moodNotes.title }}</p>
          <div class="flex-space-between mt-10">
            <div class="font-s-14 color-grey-2">
              <svg t="1741416645564" class="icon-theme-1 icon-size-16 svg-translateY-3" viewBox="0 0 1024 1024"
                   version="1.1" xmlns="http://www.w3.org/2000/svg"
                   p-id="38483">
                <path
                  d="M512 64C264.946 64 64 264.946 64 512s200.946 448 448 448 448-200.946 448-448S759.054 64 512 64z m0 831.828c-211.613 0-383.828-172.215-383.828-383.828S300.216 128.172 512 128.172c211.785 0 383.828 172.044 383.828 383.828 0 211.785-172.215 383.828-383.828 383.828z"
                  p-id="38484"></path>
                <path
                  d="M672.172 512h-160V288.173c0-17.72-14.28-32.172-32-32.172s-32 14.451-32 32.172v256c0 17.719 14.28 31.999 32 31.999h192c17.72 0 32.173-14.28 32.173-31.999C704.172 526.28 689.721 512 672.172 512z"
                  p-id="38485"></path>
              </svg>
              {{ moodNotes.recordTime }}
            </div>
            <div @click="update">
              <svg t="1742972825057" class="icon-theme-2 icon-hover cursor-pointer icon-size-18 svg-translateY-3"
                   viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="46397">
                <path
                  d="M526.41 117.029v58.514a7.314 7.314 0 0 1-7.315 7.314H219.429a36.571 36.571 0 0 0-35.987 29.989l-0.585 6.583V804.57a36.571 36.571 0 0 0 29.989 35.987l6.583 0.585H804.57a36.571 36.571 0 0 0 35.987-29.989l0.585-6.583v-317.44a7.314 7.314 0 0 1 7.314-7.314h58.514a7.314 7.314 0 0 1 7.315 7.314v317.44a109.714 109.714 0 0 1-99.182 109.203l-10.533 0.512H219.43a109.714 109.714 0 0 1-109.203-99.182l-0.512-10.533V219.43a109.714 109.714 0 0 1 99.182-109.203l10.533-0.512h299.666a7.314 7.314 0 0 1 7.314 7.315z m307.345 31.817l41.4 41.399a7.314 7.314 0 0 1 0 10.313L419.985 655.726a7.314 7.314 0 0 1-10.313 0l-41.399-41.4a7.314 7.314 0 0 1 0-10.312l455.168-455.168a7.314 7.314 0 0 1 10.313 0z"
                  p-id="46398"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="padding-10">
          <vditor-preview v-if="infoDrawer && moodNotes.content!=null" :id="'moodNotes-content-'+moodNotes.id"
                          :content="moodNotes.content"></vditor-preview>
        </div>
      </div>
    </el-drawer>
    <time-notes-editing :time-notes-dialog-visible="timeNotesDialogVisible"
                        :time-notes="moodNotes"
                        @timeNotesDialogVisibleMethod="timeNotesDialogVisibleMethod"
                        @success="getList"></time-notes-editing>
  </div>
</template>

<script>
import TimeNotesEditing from "../../components/timeNotes/time-notes-editing.vue";
import VditorPreview from "../../components/vditorComponents/Vditor-preview.vue";
import {createAnimator} from '~/plugins/animationUtils';

export default {
  name: "timeMotesAdmin",
  components: {VditorPreview, TimeNotesEditing},
  data() {
    return {
      tabs: 'tabs',
      queryParams: {
        pageNum: 1,
        pageSize: 40,
        title: null,
      },
      total: 0,
      scrollLoading: true,

      loading: true,
      moodNotesList: [],
      moodNotes: {},
      timeNotesDialogVisible: false,
      infoDrawer: false,
      debounceTimer: null,//防抖
      debounceTime: 400,//防抖时间
      animator: null, // 动画器实例
    }
  },
  watch: {
    'queryParams.title'() {
      this.getListDebounceTimer();
    },
  },

  methods: {
    update() {
      this.timeNotesDialogVisible = true;
    },
    timeNotesDialogVisibleMethod(val) {
      this.timeNotesDialogVisible = val
    },
    deleteById(id) {
      this.$confirm('确定要删除该随笔吗', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        this.$API(`/frontDesk/time/notes/delete/${id}`, "get").then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          }
        })
      });
    },
    getInfo(id) {
      this.$API("/white/time/notes/getInfo/" + id, "get").then(res => {
        this.moodNotes = res.data;
        this.infoDrawer = true;
      })
    },
    getListDebounceTimer() {
      this.loading = true;
      this.infoDrawer = false;
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.getList();
      }, this.debounceTime);
    },

    getList() {
      this.loading = true;
      this.infoDrawer = false;
      this.$API("/frontDesk/time/notes/list", "post", null, this.queryParams).then(res => {
        this.moodNotesList = res.rows;
        this.total = res.total;
        this.loading = false;
        this.animator.triggerAllItemsAnimation(this.moodNotesList, 'userAdminTimeMotesAdminItem');
      })
    },
    getData() {
      let scrollTop = document.documentElement.scrollTop
      let clientHeight = document.documentElement.clientHeight
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollHeight - (scrollTop + clientHeight) <= 1) {
        if (!this.scrollLoading) return;
        if (this.total > (this.queryParams.pageNum) * this.queryParams.pageSize) {
          this.scrollLoading = false;
          this.queryParams.pageNum = this.queryParams.pageNum + 1;
          const startIndex = this.moodNotesList.length; // 记录新增前的索引
          this.$API("/frontDesk/time/notes/list", "post", null, this.queryParams).then(res => {
            res.rows.forEach(item => {
              this.moodNotesList.push(item)
            })
            this.total = res.total;
            this.animator.triggerNewItemsAnimation(startIndex, res.rows.length, 'userAdminTimeMotesAdminItem');
          }).finally(() => this.scrollLoading = true)
        }
      }
    },
  },
  mounted() {
    this.animator = createAnimator(this, 'commonList')
    this.getList();
    window.addEventListener('scroll', this.getData, true);
  },
  destroyed() {
    //离开页面时删除该监听
    window.removeEventListener('scroll', this.getData, true)
  },
}
</script>

<style>
.home-top-index {
  background-color: #FFFFFF;
  border-radius: 4px;
  padding: 10px;
  min-height: 100px;
}

.time-motes-admin-list-item {
  margin: 10px 0px;
  width: auto;
  padding: 8px;
  border-radius: 4px;
  transition: .2s;
}

.time-motes-admin-list-item:hover {
  background-color: #F3F3F3;
}

.mood-notes-title {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 30px;
  border-bottom: 1px solid #bdc3c7;
}

.el-drawer {
  border-radius: 20px;
}
</style>
